<template>
    <div class="Home">
        <div class="top-container">
            <NavHeader :isListShow="isListShow">
                <template v-slot:mid>
                    <span>猫眼电影</span>
                </template>
                <template v-slot:right>
                    <span class="iconfont icon-caidan" @click="listToogle"></span>
                </template>
            </NavHeader>
            <OpenApp></OpenApp>
            <TopBar :categoryList="categoryList"></TopBar>
        </div>

        <!-- 中间主要内容列表区域 -->
        <div class="main">
            <router-view v-slot="{ Component }">
                <keep-alive>
                    <component :is="Component" v-if="route.meta.keepAlive" />
                </keep-alive>
                <component :is="Component" v-if="!route.meta.keepAlive" />
            </router-view>
        </div>

        <TabBar :tabList="tabList"></TabBar>
    </div>
</template>

<script setup name="Home">
import { ref } from "@vue/reactivity";
import { useRoute } from "vue-router";
import NavHeader from "components/common/NavHeader/index.vue";
import OpenApp from "components/common/OpenApp/index.vue";
import TopBar from "components/common/TopBar/index.vue";
import TabBar from "components/common/TabBar/index.vue";

const route = useRoute();

// 菜单列表的显示控制
const isListShow = ref(false);
const tabList = ref([
    {
        id: "1",
        path: "/",
        name: "电影/影视",
        icon: "icon-dianying",
    },
    {
        id: "2",
        path: "/videos",
        name: "视频",
        icon: "icon-shipin1",
    },
    {
        id: "3",
        path: "/shortvideos",
        name: "小视频",
        icon: "icon-shipin",
    },
    {
        id: "4",
        path: "/show",
        name: "演出",
        icon: "icon-yanchu",
    },
    {
        id: "5",
        path: "/profile",
        name: "我的",
        icon: "icon-wode",
    },
]);

const categoryList = ref([
    {
        id: 1,
        name: "武汉",
        path: "/adress",
        icon: "iconfont icon-jiantou-tianchong",
    },
    {
        id: 2,
        name: "热映",
        path: "/hot",
        icon: "",
    },
    {
        id: 3,
        name: "影院",
        path: "/cinema",
        icon: "",
    },
    {
        id: 4,
        name: "待映",
        path: "/shown",
        icon: "",
    },
    {
        id: 5,
        name: "经典电影",
        path: "/classic",
        icon: "",
    },
    {
        id: 6,
        name: "",
        path: "/search",
        icon: "",
    },
]);

// 菜单列表切换
const listToogle = () => {
    isListShow.value = !isListShow.value;
};
</script>

<style lang="less" scoped>
.nav-header {
    span {
        display: block;
        color: @text-color;
    }
}
.top-container {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
}
</style>
